<h1>My First Attribute Directive</h1>
<h4>Pick a highlight color</h4>
<div>
  <input type="radio" name="colors" (click)="color='lightgreen'">Green
  <input type="radio" name="colors" (click)="color='yellow'">Yellow
  <input type="radio" name="colors" (click)="color='cyan'">Cyan
</div>
<p [myHighlight]="color">Highlight me!</p>

<p [myHighlight]="color" defaultColor="violet">
  Highlight me too!
<p>
<!-- <p myHighlight highligthClor="yellow">Highlighted in yellow</p> -->
<!-- <p myHighlight [highlightColor]="'orange'">Highlighted in orange</p> -->
<!-- <p myHighlight [highlightColor]="color">Highlighted with parent component's color</p> -->
<!-- <p [myHiglight]="color">Highlight me!</p> -->
<!-- <p myHighlight>Highlight me!</p> -->
<div class="buttons">
  <!-- <button [disabled]="!heroes.canAdd()" (click)="heroes.addInactive()">Add inactive hero</button>
  <button [disabled]="!heroes.canAdd()" (click)="heroes.addActive()">Add active hero</button>
  <button [disabled]="!heroes.canRemove()" (click)="heroes.remove()">Remove hero</button> -->
</div>
<div class="columns">
  <div class="column">
    <h4>Basic State</h4>
    <p>Switch between active/inactive on click.</p>
    <hero-list-basic [heroes]=heroes></hero-list-basic>
  </div>
</div>
<div>
  <hero-form></hero-form>
</div>
<br /><br />

<alert type="success">hello</alert>

<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero.name}}</h2>
<p>Heroes:</p>
<ul>
  <li *ngFor="let hero of heroes">
    {{ hero.name }}
  </li>
</ul>
<p *ngIf="heroes.length>3">There are many heroes!</p>
<click-me></click-me>

<h4>Give me some keys!</h4>
<div><key-up1></key-up1></div>

<h4>keyup loop-back component</h4>
<div>
  <loop-back></loop-back>
</div>
<br /><br />


<h4>Give me some keys!</h4>
<div><key-up2></key-up2></div>

<h4>Type away! Press[Enter] when done</h4>
<div>
  <key-up3></key-up3>
</div>

<h4>Type away! Press[enter] when done</h4>
<div>
  <key-up4></key-up4>
</div>

<h4>little tour</h4>
<div>
  <little-tour></little-tour>
</div>
